<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web基础练习</title>
    <style>
        .nav li>a {
            color: red;
        }

        /* 把熊大和熊二改为绿色  并集选择器喜欢竖着写 最后一个选择器不需要加逗号*/
        div,
        p,
        li {
            color: green;
        }

        /* 练习1 未被访问的链接 a:link */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 练习1 已被访问的链接 a:visited */
        a:visited {
            color: blue;
        }

        /* 选择鼠标经过的链接 */
        a:hover {
           background-color: #ff6700;
        }

        /* 鼠标按下还没有弹起来的时候 */
        a:active {
            color: green;
        }

        input:focus {
            background-color: yellow;
        }

        a {
            width: 200px;
            height: 60px;
            background-color: #808080;
            /* 转换为块元素 */
            display: block;
            text-decoration: none;
            font-size: 20px;
            color:#ffffff;
            text-indent: 2em;
            /* 文字的line-height和盒子的height相同可以实现在盒子内让文字垂直居中考虑文字大小20px */
            line-height: 60px;
        }

        div {
            height: 60px;
            background-color: #00ff00;
            /* 转换为行内元素 */
            display: inline;
        }

        span {
            height: 60px;
            background-color: #ff8000;
            /* 转换为行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <!--Css复合选择器子元素选择器中间空格 到下一个标签代表上一个到下一个所有符合条件的标签，>代表上一个距离下一个最近的标签-->
    <div class="nav">
        <li><a href="http://www.weibo.com" target="_blank">微博</a></li>
        <ul>
            <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
            <a href="http://www.taobao.com" target="blank">淘宝</a>
            <a href="http://www.baidu.com" target="_blank">百度</a>
        </ul>
    </div>
    <!-- Css复合选择器之并集选择器 并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明-->
    <div>熊大</div>
    <P>熊二</P>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸</li>
        <li>猪妈</li>
    </ul>

    <!-- Css复合选择器之链接伪类选择器 最大特点是用冒号：表示，比如：:hover、:first-child -->
    <!-- 链接伪类选择器 a:link(选择所有未被访问的链接) a:visited（选择所有已被访问的链接） a:hover（选择鼠标指针位于其上的链接） a:active（选择活动链接（鼠标按下未弹起的链接）） -->
    <!-- 练习1 未被访问的链接 a:link -->
    <!-- 链接伪类选择器要按照:link :visited :hover :active进行顺序声明 顺序不能错！ LVHA顺序 -->
    <!-- focus伪类选择器 用于获取焦点的表单元素一般情况<input>类表单元素才能获取，主要针对表单 -->
    <input type="text">
    <input type="text">
    <input type="text">
    <!--元素显示模式在yuanshu.png图片-->
    <!-- 元素显示模式转换 -->
    <a href="http://www.taobao.com" target="blank">淘宝</a>
    <div>我是块元素</div>
    <div>我是块元素</div>
    <Span>行内元素转换为行内块元素</Span>
    <Span>行内元素转换为行内块元素</Span>
    <!-- 练习 简洁版小米侧边栏案例 -->
    <a href="">手机 电话卡</a>
    <a href="">电视 盒子</a>
    <a href="">笔记本 平板</a>
    <a href=""> 出行 穿戴</a>
    <a href="">智能 路由器</a>
    <a href="">健康 儿童</a>
    <a href="">耳机 音响</a>
</body>

</html>